<template>
  <div class="page J-card">
    <div class="card-show">
      <div class="list card-shadow" :style="{'background':cardShow.background_pic_path?'url('+URL+cardShow.background_pic_path+') no-repeat': '-webkit-linear-gradient(60deg, #fafafa 25%,' + cardShow.color +')'}">
        <div class="weui-flex pl">
            <div class="card-avatar">
              <img :src="cardShow.logo_url || avatar" />
            </div>
            <div class="weui-flex__item info">
              <div class="cell"><span class="font-16">{{cardShow.brand_name}}</span> <!--<span class="cardname fr">会员规则</span>--></div>
              <div class="cell"><span class="font-14 color-2">{{cardShow.membership_number}}</span></div>
            </div>
        </div>
        <div class="level_box" ref="level">
          <div class="weui-flex level pl"  v-if="cardShow.supply_level == 1">
            <div class="cardtis" v-if="cardShow.next_level_conditions">再获取 <span class="color-3">{{cardShow.next_level_conditions_margin}}</span> 积分即可升级为<span class="color-1"> {{cardShow.next_level_title}}</span></div>
            <div class="pl" v-for="item,key in cardShow.level_rules" :class="{
              'last-level':key == cardShow.level_rules.length-1}" :style="{
            'width':(key != cardShow.level_rules.length-1) && levelWidth / (cardShow.level_rules.length-1) + 'px'}">
              <div class="level-bg"
                   v-if="(key != cardShow.level_rules.length-1) && (cardShow.current_level_conditions/1 >= item.conditions/1 || !cardShow.current_level_conditions)"
                   :style="{'width':cardShow.current_level_conditions == item.conditions?cardShow.total_bonus/cardShow.next_level_conditions*100 + '%':'100%'}"></div>
              <div class="name pl" ref="levelName" :class="{
              'level-active': cardShow.current_level_conditions == item.conditions,
              'active': !cardShow.next_level_conditions || cardShow.current_level_conditions/1  > item.conditions/1}"
                   :style="{'left':'-'+item.title.length*6+'px'}">{{item.title}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-coupon" v-if="cardShow.privilege">
        <div class="title">会员特权</div>
        <div class="info">
          <p>{{cardShow.privilege}}</p>
        </div>
      </div>
      <div class="weui-flex J-recList pl">
        <div class="weui-flex__item line-bottom line-top">
          <router-link :to="'/integral?card_id='+$route.query.id" class="name line-left">
            <span class="_n color-1">{{cardShow.bonus}}</span>积分</router-link>
        </div>
        <div class="weui-flex__item pl">
          <router-link :to="'/coupon?id='+$route.query.id" class="name line-left">
            <span class="_n color-1">{{cardShow.couponsNum || 0}}</span>优惠劵
          </router-link>
        </div>
        <div class="weui-flex__item pl" v-if="cardShow.supply_balance == 1">
          <div class="recharge">
            <div class="name line-left">
              <span class="_n color-3">{{cardShow.balance}}<router-link :to="'/recharge?id='+$route.query.id" class="btn-recharge">充值</router-link></span>余额
            </div>
          </div>
        </div>
      </div>
      <!--<div class="fixd-box">-->
        <!--<div class="weui-flex">-->
          <!--<div class="weui-flex__item">-->
            <!--<div class="name day-icon">今日油价</div>-->
          <!--</div>-->
          <!--<div class="weui-flex__item pl">-->
            <!--<div class="name zc-icon">支持油站</div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    </div>
  </div>
</template>
<script>
  const config = require('~src/config')
  import { mapGetters, mapState } from 'vuex'
  const util = require('~src/lib/util')
  export default {
    name: 'card',
    data () {
      return {
        levelWidth: 0,
        URL: config._API_,
        avatar: config._URL_ + '/static/images/avatar.png'
      }
    },
    computed: {
      ...mapGetters({
        cardShow: 'getCardshow'
      }),
      ...mapState({
        cardList: 'getCardList'
      })
    },
    mounted () {
      var _this = this
      var cardId = _this.$route.query.id
      _this.$nextTick(function () {
        //这个逻辑产品之前没说
        _this.levelWidth = _this.$refs.level.offsetWidth
        if (util.isEmptyObject(_this.cardShow)) {
          _this.$store.dispatch('getCardshow', cardId)
        } else {
          if (_this.$store.state.card.list.data.length > 0) {
            _this.$store.commit('updataCardshow', cardId)
          }
        }
      })
    }
  }
</script>
<style lang="scss">
  .fixd-box{
    position: fixed;
    bottom:15px;
    left:0;
    right:0;
    .day-icon{
      width:95px;
      margin:0 auto;
      &:before{
        content:'';
        width:22px;
        height:22px;
        display: block;
        background-image:url("/static/images/yun.png");
        background-size:cover;
        float: left;
        margin-right:5px;
      }
    }
    .zc-icon{
      padding-left:18px;
      width:95px;
      margin:0 auto;
      &:before{
        content:'';
        width:24px;
        height:24px;
        display: block;
        background-image:url("/static/images/edit.png");
        background-size:cover;
        float: left;
        margin-right:5px;
      }
    }
  }
  .card-show{
    margin: 15px;
  }
  .card-shadow{
    background: #d2d2d2;
    box-shadow: 0px 2px 2px #cccaca;
  }
  .J-recList{
    margin-top:10px;
    background-color:#fff;
    .name{
      font-size:14px;
      display: block;
      padding:10px 0;
      color:#333;
      text-align: center;
      ._n{
        display: block;
        text-align: center;
      }
    }
    .recharge{
      padding:0 10px;
      position: relative;
      vertical-align: middle;
      overflow: hidden;
      .name,._n{
        text-align: left;
      }
      .btn-recharge{
        background-color:#009900;
        color:#fff;
        font-size:12px;
        margin-top:8px;
        padding: 5px 6px;
        margin-left: 10px;
        white-space: nowrap;
      }
    }
  }
  .J-card{
    .info{
      padding-left:10px;
    }
    .cardtis{
      position: absolute;
      top:-28px;
      left:-16px;
      border-radius:3px;
      -webkit-border-radius: 3px;
      font-size:12px;
      padding:2px 3px;
    }
    .card-coupon{
      padding:5px 15px;
      background-color:#fff;
      .title{
        font-size:14px;
      }
      .info{
        font-size:14px;
        padding:5px 0;
        text-align: left;
        color:#999
      }
    }
    .level{
      margin:60px 20px 0;
      font-size:12px;
      background-color:#eee;
      height:2px;
      border-radius: 2px;
      -webkit-border-radius: 2px;
      background: -webkit-linear-gradient(90deg, #fefefe 25%, #eee);
      .weui-flex__item:last-child{
        text-align: right;
      }

      .level-bg{
        height:2px;
        background-color: #009900;
      }
      .name{
        position:absolute;
        top:8px;
        white-space:nowrap;
        &:before{
          position:absolute;
          top:-9px;
          left:50%;
          margin-left:-2px;
          content: '';
          display: block;
          width:4px;
          height: 4px;
          background-color:#eee;
          border-radius: 10px;
          -webkit-border-radius: 10px;
        }
      }
      .level-active{
        color:#009900;
        &:before{
          background-color:#009900;
        }
      }
      .active{
        &:before{
          background-color:#009900;
        }
      }
    }
    .cardname{
      font-size:12px;
      line-height:26px
    }
    .list{
      display: block;
      padding:15px;
      height:150px;
      margin-bottom:10px;
      -weikit-border-radius:10px;
      border-radius:10px;
      color:#333;
      .cell{
        span.t{
          display: inline-block;
          padding:3px 5px 2px;
          font-size:12px;
        }
        .btn-jf{
          background-color:#00CC00;
          color:#fff;
          margin-right:10px;
        }
        .btn-yuer{
          background-color:#E4E4E4;
        }
      }
    }
  }
  .card-avatar{
    width:40px;
    height:40px;
    margin-right:15px;
    -webkit-border-radius:50%;
    border-radius:50%;
    img{
      width:40px;
      height:40px;
      -webkit-border-radius:50%;
      border-radius:50%;
    }
  }
</style>
